<template>
  <div class="Life">
    <!-- 顶部图片 -->
    <div class="bigbg">
      <img src="../../public/img/gp.jpg" alt="">
    </div>
    <!-- 泊寓故事 -->
    <div class="by">
      <div class="story">
        <span>泊寓故事</span>
      </div>
      <!-- 轮播图 -->
      <div class="lunbo">
        <div class="all" v-for="(item,i) of app" :key="i" @click="tz(item)">
          <router-link to="">
           <img class="tupian" :src="item.spic" alt="">
           <p class="all_p">{{item.sname}}</p>
          </router-link>
        </div>
      </div>
    </div>
    <!-- 社区活动 -->
    <div class="she_qu">
      <div class="sq">社区活动</div>
      <div class="sq_active">
        <div class="shequ">
          <router-link to="/play">
            <div class="shequ_bg"><img src="../../public/img/s_1.jpg" alt=""></div>
            <p class="active">{{cdd.intr1}}</p>
            <p class="time"><img src="../../public/img/time.png" alt="">{{cdd.acti1}}</p>
            <p class="map"><img src="../../public/img/map.png" alt="">{{cdd.loca1}}</p>
          </router-link>
        </div>
        <div class="shequ">
          <router-link to="/play">
            <div class="shequ_bg"><img src="../../public/img/s_2.jpg" alt=""></div>
            <p class="active">{{cdd.intr2}}</p>
            <p class="time"><img src="../../public/img/time.png" alt="">{{cdd.acti2}}</p>
            <p class="map"><img src="../../public/img/map.png" alt="">{{cdd.loca2}}</p>
          </router-link>
        </div>
        <div class="shequ">
          <router-link to="/play">
            <div class="shequ_bg"><img src="../../public/img/s_3.jpg" alt=""></div>
            <p class="active">{{cdd.intr3}}</p>
            <p class="time"><img src="../../public/img/time.png" alt="">{{cdd.acti3}}</p>
            <p class="map"><img src="../../public/img/map.png" alt="">{{cdd.loca3}}</p>
          </router-link>
        </div>
        <div class="shequ">
          <router-link to="/play">
            <div class="shequ_bg"><img src="../../public/img/s_4.jpg" alt=""></div>
            <p class="active">{{cdd.intr4}}</p>
            <p class="time"><img src="../../public/img/time.png" alt="">{{cdd.acti4}}</p>
            <p class="map"><img src="../../public/img/map.png" alt="">{{cdd.loca4}}</p>
          </router-link>
        </div>
        <div class="shequ">
          <router-link to="/play">
            <div class="shequ_bg"><img src="../../public/img/s_5.jpg" alt=""></div>
            <p class="active">{{cdd.intr5}}</p>
            <p class="time"><img src="../../public/img/time.png" alt="">{{cdd.acti5}}</p>
            <p class="map"><img src="../../public/img/map.png" alt="">{{cdd.loca5}}</p>
          </router-link>
        </div>
      </div>
    </div>
    <tabbar :nav="name"></tabbar>
  </div>
</template>
<script>
// import Tabbar from "./Tabbar.vue"
export default{
  data(){
    return{
      app:[],
      cdd:[],
      name:"shenghuo"
    }
  },
  // components:{
  //   Tabbar
  // },
  methods:{
    load(){
      this.axios.get('/stype/v1/look').then(res=>{
        this.app=res.data;
        // console.log(this.app)
        this.app.forEach(item=>{
          if(item.spic){
            item.spic=require('../../public/img/'+item.spic)
          }
        })
      })
    },
    tz(item){
      if(item.sid == 1){
        this.$router.push("/store")
      }else if(item.sid == 2){
        this.$router.push("/city")
      }else if(item.sid == 3){
        this.$router.push("/housec")
      }else if(item.sid == 4){
        this.$router.push("/docter")
      }
    },
    load2(){
      this.axios.get('/found/v1/search').then(res=>{
        this.cdd=res.data[0];
        // console.log(this.cdd)
        // var arr = JSON.stringify(this.cdd)
        // console.log(arr)
        // var arr2 = arr.split(`事",`)[1]
        // console.log(arr2)
        // var arr3 = arr2.split(`,"intr1"`)[0]
        // console.log(`{${arr3}}`)
        // console.log(JSON.parse(`{${arr3}}`))
        // var arr4 = JSON.parse(`{${arr3}}`)
        // console.log(this.cdd)
      })
    }
  },
  mounted(){
    
    this.load()
    this.load2()
    
  }
}
</script>

<style scoped>
.Life{
  margin-bottom: 70px;
}
/* 顶部图片 */
.bigbg>img{
  width: 100%;height: 250px;
}
/* 泊寓故事 */
.by{
  margin-top: 20px;
}
.story>span{
  font-size: 24px;
}
.more{
  margin-left:192px ;
  color: rgba(204, 204, 204);
}
/* 轮播图 */
.lunbo{
  display: flex;
  overflow: auto;
}
.lunbo::-webkit-scrollbar{
  display: none;
}
.all{
  width: 182px;
  height: 160px;
  margin: 10px;
}
.all_p{
  font-size: 13px;
  color: black;
}
.tupian{
  width: 182px;height: 130px;
  border-radius: 25px;
}
/* 社区活动 */
.sq{
 font-size: 24px;
 margin: 20px 0; 
}
.shequ_bg>img{
  width: 95%;height: 180px;
  border-radius: 10px;
}
.shequ{
  font-size: 12px;
  width: 100%;
  text-align: center;
  margin: 5px 0;
}
.active{
  font-size: 14px;
  text-align: center;
  margin: 5px 0px;
  font-weight: bold;
  color: black;
}
.time{
  color: black;
}
.map{
  color: black;
}
</style>